<template>
  <div>
    <el-dialog
      :title="$t('select_personnel_information')"
      :visible.sync="open"
      width="800px"
      append-to-body
    >
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableList"
        @selection-change="handleTableChange"
        height="800"
        border
        :max-height="tableHeight"
      >
        <el-table-column type="selection" width="55" align="center" />

        <el-table-column
          :label="$t('personnel_name')"
          prop="paramName"
          :show-overflow-tooltip="true"
        />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{
          $t("confirm")
        }}</el-button>
        <el-button @click="cancel">{{ $t("cancel") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  dicts: ["salary_project_type"],
  props: {
    checkData: {
      type: [Array, null],
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      loading: false,
      open: false,
      tableList: [],
      checkList: [],
    };
  },
  created() {},
  watch: {
    tableList: {
      handler(newValue) {
        if (this.checkData.length && newValue.length) {
          let list = [];
          this.tableList.forEach((item) => {
            this.checkData.forEach((val) => {
              if (val.paramKey === item.paramKey) {
                list.push(item);
              }
            });
          });
          if (list.length) {
            this.$nextTick(() => {
              list.forEach((row) => {
                this.$refs.multipleTable.toggleRowSelection(row, true);
              });
            });
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    showModal() {
      this.open = true;
      this.handleQuery();
    },
    closeModal() {
      this.open = false;
    },
    getList() {
      this.loading = true;
      this.tableList = [
        {
          paramName: this.$t("name"),
          paramKey: "employeeName",
        },
        {
          paramName: this.$t("employee_code"),
          paramKey: "employeeCode",
        },
        {
          paramName: this.$t("chinese_name"),
          paramKey: "chineseName",
        },
        {
          paramName: this.$t("english_name"),
          paramKey: "englishName",
        },
        {
          paramName: this.$t("mobile_number"),
          paramKey: "phone",
        },
        {
          paramName: this.$t("residential_phone_number"),
          paramKey: "phoneHome",
        },
        {
          paramName: this.$t("office_phone_number"),
          paramKey: "phoneOffice",
        },
        {
          paramName: this.$t("personal_email"),
          paramKey: "email",
        },
        {
          paramName: this.$t("company_email"),
          paramKey: "emailCompany",
        },
        {
          paramName: this.$t("gender"),
          paramKey: "sex",
        },
        {
          paramName: this.$t("date_of_birth"),
          paramKey: "birthday",
        },
        {
          paramName: this.$t("marital_status"),
          paramKey: "maritalStatus",
        },
        {
          paramName: this.$t("identity_card_number"),
          paramKey: "cardNo",
        },
        {
          paramName: this.$t("identity_card_issuance_country"),
          paramKey: "issuingCountry",
        },
        {
          paramName: this.$t("other_identity_document_type"),
          paramKey: "otherDocumentTypes",
        },
        {
          paramName: this.$t("other_identity_document_numbers"),
          paramKey: "otherDocumentNo",
        },
        {
          paramName: this.$t("passport_number"),
          paramKey: "passportNumber",
        },
        {
          paramName: this.$t("issuing_country"),
          paramKey: "passportCountry",
        },
        {
          paramName: this.$t("passport_expiration_date"),
          paramKey: "passportExpirationDate",
        },
        {
          paramName: this.$t("place_of_birth"),
          paramKey: "birthPlace",
        },
        {
          paramName: this.$t("nationality"),
          paramKey: "nationality",
        },
        {
          paramName: this.$t("hukou"),
          paramKey: "domicile",
        },
        {
          paramName: this.$t("cpc_ccyl"),
          paramKey: "relationship",
        },
        {
          paramName: this.$t("social_insurance_userid"),
          paramKey: "socialSecurityNo",
        },
        {
          paramName: this.$t("housing_provident_fund_userid"),
          paramKey: "providentFundNo",
        },
        {
          paramName: this.$t("residential_address"),
          paramKey: "addressResidential",
        },
        {
          paramName: this.$t("mailing_address"),
          paramKey: "addressCorrespondence",
        },
        {
          paramName: this.$t("emergency_contact_perosns"),
          paramKey: "emergencyContactName",
        },
        {
          paramName: this.$t("relationship"),
          paramKey: "emergencyContactRelation",
        },
        {
          paramName: this.$t("contact_phone_number"),
          paramKey: "emergencyContactPhone",
        },
      ];
      this.loading = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleTableChange(selection) {
      this.checkList = selection;
    },
    cancel() {
      this.checkList = [];
      this.closeModal();
    },
    submitForm() {
      this.$emit("setCheckData", this.checkList);
      this.closeModal();
    },
  },
};
</script>
<style scoped lang="scss">
.input-block {
  display: flex;
  align-items: center;
}
</style>
